<template>
    <el-autocomplete v-model="infoName" valueKey="name" @blur="checkCurrentId" :trigger-on-focus="true" :fetch-suggestions="querySearchAsync" @mouseenter.native="isMouseEnter=true" @mouseleave.native="isMouseEnter=false" :disabled="disabled" :placeholder="placeholder" @select="handleAppSelect">
        <i class="el-input__icon" :class="infoName&&isMouseEnter&&!disabled?'el-icon-error':'el-icon-edit'" @click="handleClear" slot="suffix"></i>
        <template slot-scope="props">
            <div class="name">{{ props.item.appName }}</div>
        </template>
    </el-autocomplete>
</template>

<script>
import CommonSearchInput from "./common";
import { getAppInfo } from "@/api/system/appInfo";

export default {
    mixins: [CommonSearchInput],
    props: {},
    methods: {
        // 异步搜索信息
        querySearchAsync(queryString, cb) {
            getAppInfo({
                search_LIKE_appName: queryString,
                iDisplayLength: this.iDisplayLength
            }).then(reponse => {
                cb(reponse.data.aaData);
            });
        },
        handleAppSelect(item) {
            this.$emit("matchRecord", Object.assign({}, item));
            this.$emit("select", item.appName);
            this.$emit("selectCode", item.appCode);
            this.$emit("selectName", item.appName);
            this.$emit("change", item.id);
            this.infoName=item.appName
        },
        handleClear() {
            if (this.infoName && !this.disabled) {
                this.infoName = "";
                this.$emit("select", "");
                this.$emit("selectName", "");
                this.$emit("change", "");
            }
        }
    }
};
</script>
